<table class="table table-hover">
    <thead>
        <tr>
            <th width="5%"><input type="checkbox" class="grid-select-all" /></th>
            <th width="15%">SKU</th>
            <th width="20%">品类</th>
            <th width="20%">备货数量</th>
            <th width="20%">已计划采购</th>
            <th width="20%">产品名称</th>
        </tr>
    </thead>
    <tbody>
    <tr bgcolor='#fff0f5'>
        <td>TTL</td>
        @foreach($headers as $col)
            <td>{{ array_key_exists($col,$total) ? (is_null($total[$col])  ? 0 : $total[$col]) : '' }}</td>
        @endforeach
    </tr>
        @foreach($paginator as $row)
            @php
                $sad = \App\Models\Stocking\StockingApplyDetail::query()
                        ->with('area')
                        ->where('psku_id',$row->psku_id)
                        ->where('plan_status','<>',3)
                        ->where('status',1)
                        ->get();
            @endphp
            <tr>
                <td><input type="checkbox" class="grid-row-checkbox" data-id="{{ $row->psku_id }}" /></td>
                <td>
                    <div>
                        <span class="grid-expand-grid-row"
                              data-inserted="0"
                              data-key="{{ $row->psku_id }}"
                              data-name="{{ 'sku-psku_code-'.$row->psku_id }}"
                              data-toggle="collapse"
                              data-target="#grid-collapse-{{ 'sku-psku_code-'.$row->psku_id }}">
                            <a href="javascript:void(0)"><i class="fa fa-angle-double-down"></i>&nbsp;&nbsp;{{ $row->sku->psku_code ?? '' }}</a>
                        </span>
                        <template class="grid-expand-{{ 'sku-psku_code-'.$row->psku_id }}">
                            <tr style='background-color: #ecf0f5;'>
                                <td colspan='100%' style='padding:0 !important; border:0;'>
                                    <div id="grid-collapse-{{ 'sku-psku_code-'.$row->psku_id }}" class="collapse">
                                        <div style="padding: 10px 10px 0 10px;" class="html">
                                            @if($sad->isNotEmpty())
                                                <table class="table ">
                                                    <thead>
                                                    <tr>
                                                        <th>备货单号</th>
                                                        <th>站点</th>
                                                        <th>备货数量</th>
                                                        <th>已计划采购</th>
                                                        <th>创建时间</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($sad as $item)
                                                        <tr>
                                                            <td>{{ $item->stocking_no }}</td>
                                                            <td>{{ $item->area->area ?? '' }}</td>
                                                            <td>{{ $item->apply_detail_num }}</td>
                                                            <td>{{ $item->plan_num }}</td>
                                                            <td>{{ $item->created_at }}</td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <div class="loading text-center" style="padding: 20px 0;">
                                                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </div>
                </td>
                <td>{{ $row->sku->classify->title ?? '' }}</td>
                <td>{{ $row->apply_detail_num }}</td>
                <td>{{ $row->plan_num }}</td>
                <td>{{ $row->sku->psku_cn ?? '' }}</td>
            </tr>
        @endforeach
    </tbody>
</table>
<script language="JavaScript" type="text/javascript">
    $(function () {
        (function () {
            $('.grid-expand-grid-row').on('click', function () {
                if ($(this).data('inserted') == '0') {
                    var name = $(this).data('name');
                    var row = $(this).closest('tr');
                    row.after($('template.grid-expand-'+name).html());
                    $(this).data('inserted', 1);
                }
                $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
            });
        })();

        $('.grid-row-checkbox').iCheck({checkboxClass:'icheckbox_minimal-blue'}).on('ifChanged', function () {
            var id = $(this).data('id');
            if (this.checked) {
                $.admin.grid.select(id);
                $(this).closest('tr').css('background-color', '#ffffd5');
            } else {
                $.admin.grid.unselect(id);
                $(this).closest('tr').css('background-color', '');
            }
        }).on('ifClicked', function () {
            var id = $(this).data('id');
            if (this.checked) {
                $.admin.grid.unselect(id);
            } else {
                $.admin.grid.select(id);
            }
        });

        (function () {
            $('.grid-select-all').iCheck({checkboxClass:'icheckbox_minimal-blue'});
            $('.grid-select-all').on('ifChanged', function(event) {
                if (this.checked) {
                    $('.grid-row-checkbox').iCheck('check');
                } else {
                    $('.grid-row-checkbox').iCheck('uncheck');
                }
            }).on('ifClicked', function () {
                if (this.checked) {
                    $.admin.grid.selects = {};
                } else {
                    $('.grid-row-checkbox').each(function () {
                        var id = $(this).data('id');
                        $.admin.grid.select(id);
                    });
                }
            });
        })();
    });
</script>
